<!-- 文件上传 -->
<template>
  <div class="el-upload-wrapper">
    <el-upload
      :before-upload="handleBeforeUpload"
      :http-request="uploadFile"
      drag
      multiple
    >
      <div class="upload-body">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          <div><em>点击上传，</em>或者拖动文档到这里</div>
          <div class="el-upload__tip">文件小余 200mb</div>
        </div>
      </div>
    </el-upload>
    <div body-class="fix-width">
      <el-table v-loading="loading" :data="fileList" class="fix-table" fixed>
        <el-table-column type="index" width="50" align="center" />
        <el-table-column key="name" label="文件名" align="center" />
        <el-table-column key="oper" label="操作" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UploadRawFile, UploadRequestOptions } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { uploadFileApi } from "@/api/file/index";
import { FileForm, FileVO } from "@/api/file/types";

const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});

const loading = ref(false);
const fileList = ref<FileVO[]>([]);

async function uploadFile(options: UploadRequestOptions): Promise<any> {
  await uploadFileApi(options.file, props.params as FileForm);
}

function handleBeforeUpload(file: UploadRawFile) {
  if (file.size > 200 * 1048 * 1048) {
    ElMessage.warning("上传图片不能大于200M");
    return false;
  }
  return true;
}
</script>

<style lang="scss" scoped>
.el-upload-wrapper {
  display: flex;
  flex-direction: column;

  :deep(.el-upload) {
    --el-upload-dragger-padding-horizontal: 0px;
    --el-upload-dragger-padding-vertical: 0px;
  }

  .upload-body {
    display: flex;
    justify-content: center;

    .el-upload__text {
      margin-top: 10px;
      margin-left: 10px;
    }

    .el-upload__tip {
      text-align: left;
      color: var(--el-color-info-dark-2);
    }
  }
}
</style>
